<template>
  <view class="index-page pb-240rpx relative">
    <header class="top">
      <view class="greeting">{{ getGreeting() }}</view>
      <img class="logo" src="../../static/logo-hdw.png" alt="logo" />
    </header>

    <section class="summary">
      <view class="title">今日有{{ totalPending }}项待办事项需要处理</view>
      <view class="cards">
        <view v-for="item in pendingCards.filter(card=>card.isShow)" :key="item.key" class="card" @click="toOtherPage(item)">
          <view class="num flex justify-between" :style="{ color: item.color }">
            <img class="w-56rpx h-56rpx" :src="item.img" alt="logo" />
            <view>{{ item.count }}</view>
          </view>
          <view class="name">{{ item.title }}</view>
          <view class="link">{{ item.action }}</view>
        </view>
      </view>
    </section>

    <section class="quick">
      <view class="section-title">快捷入口</view>
      <view class="quick-list">
        <view v-for="q in quickEntries" :key="q.key" class="quick-item" @click="gotoUrl(q)">
          <div class="iconfont f-size" :class="q.icon" />
          <view class="text">{{ q.title }}</view>
        </view>
      </view>
    </section>

    <section class="news">
      <view class="section-title">最新动态</view>
      <view class="news-list">
        <UpRefresh :items="msgList"  :loading="loading" @refresh="handleRefresh" :lower-threshold="80">

        </UpRefresh>
      </view>
    </section>
  </view>
  <CustomTabbar page="homeIndex"></CustomTabbar>
</template>

<script setup lang="ts">
import { tabOptions } from '@/utils/options'
import { debounce } from '@antfu/utils'
import emptyImg from '@/static/empty.png'
import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { queryPoChangeMessage,queryMsgInfo } from '@/genapi/_homeList'
import { computed, reactive } from 'vue'

const state = reactive({
  pendingCards: [
    {
       isShow:true,
      key: 'confirmPurchase',
      title: '待确认采购单',
      count: 0,
      action: '需要尽快确认',
      color: '#2D6BFF',
      img: '../../static/Group1.png',

    },
    {
       isShow:true,
      key: 'deliveryOrder',
      title: '待发货订单',
      count: 0,
      action: '需要安排发货',
      color: '#18A058',
      img: '../../static/Group2.png'
    },
    {
       isShow:true,
      key: 'monthBill',
      title: '本月应结账单',
      count: 1,
      action: '¥ 43,810.00',
      color: '#7C5CFF',
      img: '../../static/Group3.png'
    },
    {  isShow:true,
      key: 'unread',
      title: '未读消息',
      count: 0,
      action: '系统通知',
      color: '#FF6A00',
      img: '../../static/Group4.png'
    }
  ],
  quickEntries: [
    { key: 'purchase', title: '采购单管理', icon: 'icon-orders',url:'/pages/orderList/index' },
    { key: 'product', title: '产品管理', icon: 'icon-chanpin',url:'/pages/index/index' },
    { key: 'bill', title: '账单管理', icon: 'icon-wj-zd' },
    { key: 'feedback', title: '问题反馈', icon: 'icon-wentifankui' }
  ],
  newsList: [
    { id: 1, title: '系统通知', desc: '系统将于本周六8:00进行例行维护', date: '2025-09-09', typeIcon: '🔔' },
    {
      id: 2,
      title: '货期咨询消息待处理',
      desc: '产品描述：皮质皮带（DD2900021） 需求数量：33个',
      date: '2025-09-09',
      typeIcon: '🕒'
    },
    { id: 3, title: '订单待发货', desc: '您在2520年03月07日，有1个订单待发货', date: '2025-09-09', typeIcon: '📄' }
  ]
})
const totalPending = ref(0)

const pendingCards = computed(() => state.pendingCards)
const quickEntries = computed(() => state.quickEntries)
const newsList = computed(() => state.newsList)
const params = ref({
  day: 90,
  endTime: ''
})
const msgList = ref([])
const loading = ref(false)
const laterGetMessage = debounce(1000, getSupplierInfo)

function toOtherPage(item) {
  if (item.key === 'confirmPurchase') {
    uni.setStorageSync('orderTab', '1')
    uni.switchTab({
      url: '/pages/orderList/index'
    })
  }
  if (item.key === 'deliveryOrder') {
    uni.setStorageSync('orderTab', '2')
    uni.switchTab({
      url: '/pages/orderList/index'
    })
  }
  if (item.key === 'unread') {
    uni.navigateTo({
    url: '/pages/notifyManage/index'
  })
  }
}
function gotoUrl(item) {
  if(item.url){
     uni.switchTab({
    url: item.url
  });
  }

}
function getGreeting() {
  const hour = new Date().getHours()

  if (hour >= 0 && hour < 12) {
    return '早上好'
  } else {
    return '下午好'
  }
}
onLoad(() => {
  uni.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline']
  })
})
onShareAppMessage(() => {
  return {
    title: '好达威供应商系统',
    path: '/pages/index/index'
  }
})
onShareTimeline(() => {
  return {
    title: '好达威供应商系统',
    path: '/pages/index/index'
  }
})
async function handleRefresh() {
  loading.value = true
  await laterGetMessage()
}
async function getSupplierInfo() {
  const isLogin = await gotoLogin()
  if(isLogin){
  const { data } = await queryPoChangeMessage(params)
  if (data?.code === 200) {
    params.value.endTime = data.data.startTime
    if (data.data.records) msgList.value.push(...data.data.records)
  }
  loading.value = false
}
}
async function gotoLogin() {
  const isNoLogin = await uni.getStorageSync('isNoLogin')
  if (isNoLogin) {
    uni.navigateTo({
      url: '/pages/login/index'
    })
    return false
  } else {
    return true
  }
}
async function getMsgInfo() {
  const isLogin = await gotoLogin()
  if(isLogin){
  const { data } = await queryMsgInfo(params)
  if (data?.code === 200&&data?.data) {
    state.pendingCards[0].count = data.data.toBeConfirmPoCount
    state.pendingCards[1].count = data.data.toBeShippedPoCount
    state.pendingCards[2].action = "¥ "+data.data.monthPayAmt
    state.pendingCards[3].count = data.data.notReadMessage
    const total = data.data.toBeConfirmPoCount+data.data.toBeShippedPoCount+data.data.notReadMessage
    totalPending.value=total>99?'99+':total
    if(data.data.monthPayAmt){
      state.pendingCards[2].isShow = true
    }else{
      state.pendingCards[2].isShow = false

    }
  }
}
}
onShow(async () => {
  handleRefresh()
})

onMounted(async () => {
  params.value.endTime = ''
  msgList.value.length = 0
  handleRefresh()
  getMsgInfo()
})
</script>

<style scoped>
.a-spin-class {
  width: 100%;
  flex: 1;
  overflow-y: scroll;
}
.dashboard {
  max-width: 400px;
  margin: 0 auto;
  background: #fff;
  padding: 12px;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding: 20rpx;
}
.greeting {
  color: #666;
  font-size: 14px;
}
.logo {
  width: 202rpx;
  height: 66rpx;
}
.summary .title {
  font-weight: 400;
  font-size: 16px;
  margin: 12rpx 30rpx 42rpx;
}
.section-title {
  font-weight: bold;
  font-size: 16px;
  margin: 60rpx 30rpx;
}
.cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 12rpx 40rpx 20rpx;
}
.card {
  border-radius: 10px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 24rpx 30rpx;
}
.card .num {
  font-size: 22px;
  font-weight: 700;
  text-align: right;
}
.card .name {
  font-size: 14px;
  margin-top: 6px;
}
.card .link {
  margin-top: 10rpx;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-style: Regular;
  font-size: 10px;
  line-height: 100%;
  letter-spacing: 5%;
  color: #7e7e7e;
}

.quick-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0rpx 30rpx;
}
.quick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.quick-item .icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #f6f7fb;
  display: grid;
  place-items: center;
  font-size: 20px;
  margin-bottom: 6px;
}
.quick-item .text {
  font-size: 12px;
  color: #333;
}
.news-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
border-radius: 5px;
border: 1px solid #D9D9D9;
  margin:0 30rpx;
}
.news-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
}
.news-item .bubble {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f2f3f5;
  display: grid;
  place-items: center;
  font-size: 16px;
}
.news-title {
  font-weight: 600;
}
.desc {
  color: #666;
  font-size: 12px;
  margin-top: 4px;
}
.right {
  text-align: right;
  color: #999;
  font-size: 12px;
}
.right .arrow {
  font-size: 20px;
  color: #c9c9c9;
}
.f-size {
  color: #2563eb;
  font-size: 30px !important;
  margin-bottom: 20rpx;
}
</style>
